<template>
    <div>
        <div class="content-panel">
            <div class="page-title v-center">
                <span>基本信息</span>
                <el-icon class="cursor-pointer ml-1" @click="showEdit"><Edit /></el-icon>
            </div>
            <div class="base-info">
                <el-row class="lh-3">
                    <el-col :span="field.span || 8" v-for="field in fields" :key="field.prop">
                        <label>{{ field.label }}：</label>
                        <el-icon v-if="field.type == 'iconSelector'"><component :is="appInfo[field.prop]" /></el-icon>
                        <span v-else-if="field.converter">{{ field.converter(appInfo[field.prop], appInfo) }}</span>
                        <span v-else-if="!field.render">{{ appInfo[field.prop] }}</span>
                        <base-render v-else :content="field.render(appInfo[field.prop], appInfo)"></base-render>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="mt-4 content-panel">
            <div class="page-title">应用菜单</div>
            <appMenu :appId="id" v-if="id" class="br-1"></appMenu>
        </div>

        <div class="text-center mt-4">
            <el-button @click="back" icon="close">关闭</el-button>
        </div>

        <el-drawer v-model="visible" title="应用编辑">
            <base-form :fields="fields" v-model="appInfo" labelPosition="top" ref="formRef" />
            <template #footer>
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="save">确定</el-button>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
import { onMounted } from "vue";
import { ElTag } from "element-plus";
import BaseRender from "@/components/base-render.js";
import appMenu from "./app-menu.vue";
import * as _ from "lodash";

const fields = ref([
    {
        label: "应用分类",
        prop: "categoryId",
        required: true,
        type: "select",
        options: loadCategory,
        converter: (val, row) => row.categoryName || "--",
        change: (val, form, { item }) => {
            if (!val) {
                form.categoryName = "--";
            } else {
                form.categoryName = item.name;
            }
        },
    },
    { label: "编码", prop: "code", required: true, width: "140px" },
    { label: "名称", prop: "name", required: true },
    {
        label: "状态",
        prop: "status",
        needNew: false,
        width: "100px",
        render: (val) => {
            if (val) {
                return h(ElTag, { type: "primary" }, () => "上架");
            } else {
                return h(ElTag, { type: "danger" }, () => "下架");
            }
        },
        display: false,
    },
    { label: "图标", prop: "icon", type: "iconSelector", width: "80px", align: "center" },
    {
        label: "支持平台",
        prop: "platform",
        type: "radioGroup",
        options: [
            { label: "PC", value: "pc" },
            { label: "APP", value: "app" },
            { label: "h5", value: "h5" },
            { label: "微信小程序", value: "mp" },
        ],
        default: "pc",
        width: "120px",
        converter: (val) => {
            return val == "pc" ? "PC" : val == "app" ? "APP" : val == "h5" ? "H5" : "微信小程序";
        },
    },
    { label: "应用地址", prop: "url", required: false, remark: "如果是外部应用，请填写正确的应用地址" },
    {
        label: "打开方式",
        prop: "openType",
        type: "radioGroup",
        options: [
            { label: "当前窗口", value: "inner" },
            { label: "新窗口", value: "new" },
        ],
        default: "inner",
        width: "120px",
        converter: (val) => (val == "inner" ? "当前窗口" : val == "new" ? "新窗口" : "全屏"),
    },
    { label: "排序", prop: "sort", default: "0", width: "80px", remark: "此处为字符串升级排序方式" },
    { label: "备注", prop: "remark", type: "textarea", span: 24 },
]);
const appInfo = ref({});
const visible = ref(false);
const formRef = ref();
const { id } = defineProps({
    id: String,
});
const emits = defineEmits(["close", "reload"]);

onMounted(() => {
    app.https.get("/sys/app/detail/" + id).then((resp) => {
        appInfo.value = resp;
    });
});

let bak;
function showEdit() {
    bak = _.cloneDeep(appInfo.value);
    visible.value = true;
}

function loadCategory() {
    return app.https.post("/sys/app-category/query");
}

function cancel() {
    appInfo.value = bak;
    visible.value = false;
}

function save() {
    formRef.value.validate((res) => {
        if (!res) {
            return;
        }

        app.https.put("/sys/app/update", appInfo.value).then(() => {
            app.success("操作成功");
            visible.value = false;
            emits("reload");
        });
    });
}

function back() {
    emits("close");
}
</script>
